<template>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 按钮 -->
      <el-button @click="addInfo" class="btnInfo" size="small" type="primary" plain
        >添加</el-button
      >
      <!-- 数据列表 -->
      <v-list @edit="edit"></v-list>
      <!-- 弹框组件 -->
      <v-dialog @cancel="cancel" :isShow="isShow" :isAdd="isAdd"></v-dialog>
    </div>
  </template>
  
  <script>
  //引入列表组件
  import vList from './list'
  //引入弹框组件
  import vDialog from './dialog'
  export default {
    data() {
      return {
        isShow:false, //用于控制弹框的显示隐藏
        isAdd:true, //定义一个属性用于区分是添加还是编辑
      };
    },
    methods: {
      //封装一个添加按钮的事件
      addInfo(){
        //打开弹框
        this.isShow = true
        //告诉弹框你是个添加
        this.isAdd = true
      },
      //封装一个关闭弹框的事件
      cancel(e){
        this.isShow = e
      },
      //封装一个编辑打开弹框事件
      edit(){
        //打开弹框
        this.isShow = true
        //告诉弹框 你是个编辑
        this.isAdd = false
      }
    },
    components:{
      vList,
      vDialog
    }
  };
  </script>
  
  <style lang="less" scoped>
  .btnInfo {
    margin: 10px;
  }
  </style>